<!-- 导出弹窗 -->
<template>
    <div class="dialog-main">
        <el-dialog :title="$t('common.export')"
                   :visible.sync="visible"
                   :close-on-click-modal="false"
                   :append-to-body="true"
                   width="700px">
            <div class="main-body">
                <el-card shadow="never" class="left-card">
                    <div slot="header">
                        <span>{{$t('common.exportField')}}</span>
                    </div>
                    <el-checkbox :indeterminate="isIndeterminate"
                                 v-model="checkAll"
                                 @change="handleCheckAllChange"
                                 style="margin-bottom: 15px">
                        <span>{{$t('common.checkAll')}}</span>
                    </el-checkbox>
                    <div class="scrollbar-checkbox">
                        <el-scrollbar style="height: 100%">
                            <el-checkbox-group v-model="checkedFields"
                                               @change="handleCheckedFieldChange">
                                <el-row :gutter="20"
                                        v-for="(item, index) in fieldList"
                                        :key="index"
                                        class="checkbox-item">
                                    <el-col :span="24">
                                        <el-checkbox :label="item"
                                                     :key="index">
                                            <span>{{item.name}}</span>
                                        </el-checkbox>
                                    </el-col>
                                </el-row>
                            </el-checkbox-group>
                        </el-scrollbar>
                    </div>
                </el-card>
                <el-card shadow="never" class="right-card">
                    <div slot="header">
                        <span>{{$t('common.fieldOrder')}}</span>
                    </div>
                    <div class="scrollbar-draggable">
                        <el-scrollbar style="height: 100%">
                            <draggable v-model="checkedFields">
                                <el-row :gutter="20"
                                        v-for="(item, index) in checkedFields"
                                        :key="index"
                                        class="tag-item">
                                    <el-col :span="24">
                                        <el-tag>
                                            <a>{{item.name}}</a>
                                        </el-tag>
                                    </el-col>
                                </el-row>
                            </draggable>
                        </el-scrollbar>
                    </div>
                </el-card>
            </div>
            <span slot="footer">
                <el-button @click="visible = false">
                    {{$t('common.cancel')}}
                </el-button>
                <el-button type="primary"
                           @click="handleConfirm">
                    {{$t('common.export')}}
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import draggable from 'vuedraggable'
import { warning } from '@/utils/message'

export default {
  props: {
    fieldList: {
      type: [String, Array]
    }
  },
  components: {
    draggable
  },
  data () {
    return {
      visible: false,
      isIndeterminate: true,
      checkAll: false,
      checkedFields: []
    }
  },
  methods: {
    /**
     * 初始化
     */
    init () {
      this.visible = true
      this.isIndeterminate = true
      this.checkAll = false
      this.checkedFields = []
    },
    /**
     * 确认
     */
    handleConfirm () {
      if (this.checkedFields.length === 0) {
        warning(this.$t(`common.leastOneField`))
        return
      }
      this.$emit('confirm', this.checkedFields)
      this.visible = false
    },
    /**
     * 处理全选
     */
    handleCheckAllChange (val) {
      this.checkedFields = val ? this.fieldList : []
      this.isIndeterminate = false
    },
    /**
     * 处理选中改变
     */
    handleCheckedFieldChange (value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.fieldList.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.fieldList.length
    },
    /**
     * 删除选中的标签
     */
    handleClose (index) {
      this.checkedFields.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
    .el-scrollbar.el-scrollbar__wrap {
        overflow-x: hidden;
    }

    .main-body {
        height: 450px
    }

    .scrollbar-checkbox {
        height: 333px;
    }

    .scrollbar-draggable {
        height: 333+35px;
    }

    .left-card {
        float: left;
        width: 65%;
        height: 450px;
    }

    .right-card {
        float: left;
        width: 35%;
        height: 450px;
    }

    .checkbox-item {
        margin-bottom: 5px;
        width: 95%;
    }

    .tag-item {
        margin-bottom: 5px;
        width: 95%;
    }
</style>
